<template>
  <dv-border-box-12 class="LinechartBox">
    <div class="d-flex pt-2 pl-2">
      <div class="d-flex">
        <span><i class="iconfont icon-chart-area" /></span>
        <span class="mx-2">{{ title }}</span>
      </div>
    </div>
    <!-- 使用动态生成的唯一 id -->
    <div class="d-flex jc-center chart-container">
      <div :id="chartId" class="chart"></div>
    </div>
  </dv-border-box-12>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from "vue";
// 引入 ECharts 库
import * as echarts from 'echarts';

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    PieIndex: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // 生成唯一的 chartId
    const chartId = ref(`line-chart-${Math.random().toString(36).substr(2, 9)}`);
    // 定义 legendData 变量来存储 legend 的数据
    const legendData = ref(['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']);
    // 定义 seriesData 变量来存储 series 的数据
    const seriesData = ref([
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle: {
          width: 4
        }
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        data: [220, 182, 191, 234, 290, 330, 310],
        lineStyle: {
          width: 4
        }
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '总量',
        data: [150, 232, 201, 154, 190, 330, 410],
        lineStyle: {
          width: 4
        }
      },
      {
        name: '直接访问',
        type: 'line',
        stack: '总量',
        data: [320, 332, 301, 334, 390, 330, 320],
        lineStyle: {
          width: 4
        }
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '总量',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        lineStyle: {
          width: 4
        }
      }
    ]);

    // 定义一个方法来更新 legendData 和 seriesData
    const updateLegendData = () => {
      switch (props.PieIndex) {
        case 1:
          legendData.value = ['大专', '本科', '硕士', '博士'];
          seriesData.value = [
            {
              name: '大专',
              type: 'line',
              stack: '总量',
              data: [10, 20, 30, 40],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '本科',
              type: 'line',
              stack: '总量',
              data: [5, 20, 25, 30],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '硕士',
              type: 'line',
              stack: '总量',
              data: [6, 9, 7, 5],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '博士',
              type: 'line',
              stack: '总量',
              data: [2, 8, 6, 10],
              lineStyle: {
                width: 4
              }
            }
          ];
          break;
        case 2:
          legendData.value = ['主任护师', '主管护士', '副主任护士', '护士'];
          seriesData.value = [
            {
              name: '主任护师',
              type: 'line',
              stack: '总量',
              data: [10, 15, 20, 25],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '主管护士',
              type: 'line',
              stack: '总量',
              data: [5, 8, 11, 14],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '副主任护士',
              type: 'line',
              stack: '总量',
              data: [1, 5, 7, 10],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '护士',
              type: 'line',
              stack: '总量',
              data: [10, 15, 20, 25],
              lineStyle: {
                width: 4
              }
            }
          ];
          break;
        case 3:
          legendData.value = ['N0', 'N1', 'N2', 'N3', 'N4', '护士长人数'];
          seriesData.value = [
            {
              name: 'N0',
              type: 'line',
              stack: '总量',
              data: [10, 20, 30, 40, 50, 60],
              lineStyle: {
                width: 4
              }
            },
            {
              name: 'N1',
              type: 'line',
              stack: '总量',
              data: [8, 9, 10, 11, 12, 13],
              lineStyle: {
                width: 4
              }
            },
            {
              name: 'N2',
              type: 'line',
              stack: '总量',
              data: [15, 16, 17, 18, 19, 20],
              lineStyle: {
                width: 4
              }
            },
            {
              name: 'N3',
              type: 'line',
              stack: '总量',
              data: [22, 23, 24, 25, 26, 27],
              lineStyle: {
                width: 4
              }
            },
            {
              name: 'N4',
              type: 'line',
              stack: '总量',
              data: [29, 30, 31, 32, 33, 34],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '护士长人数',
              type: 'line',
              stack: '总量',
              data: [36, 37, 38, 39, 40, 41],
              lineStyle: {
                width: 4
              }
            }
          ];
          break;
        case 4:
          legendData.value = ['<1', '1<=y<2', '2<=y<5', '5<=y<10', '10<=y20', '>=20'];
          seriesData.value = [
            {
              name: '<1',
              type: 'line',
              stack: '总量',
              data: [1, 2, 3, 4, 5, 6],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '1<=y<2',
              type: 'line',
              stack: '总量',
              data: [8, 9, 10, 11, 12, 13],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '2<=y<5',
              type: 'line',
              stack: '总量',
              data: [15, 16, 17, 18, 19, 20],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '5<=y<10',
              type: 'line',
              stack: '总量',
              data: [22, 23, 24, 25, 26, 27],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '10<=y20',
              type: 'line',
              stack: '总量',
              data: [29, 30, 31, 32, 33, 34],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '>=20',
              type: 'line',
              stack: '总量',
              data: [36, 37, 38, 39, 40, 41],
              lineStyle: {
                width: 4
              }
            }
          ];
          break;
        default:
          legendData.value = [];
          seriesData.value = [];
          break;
      }
    };

    const initChart = () => {
      // 更新 legendData 和 seriesData
      updateLegendData();
      const chartDom = document.getElementById(chartId.value);
      if (chartDom) {
        const myChart = echarts.init(chartDom);

        const option = {
          // 设置全局文本颜色为白色
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            // 使用 legendData 变量的值
            data: legendData.value,
            textStyle: {
              color: '#fff'
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['2024.Q1', '2024.Q2', '2024.Q3', '2024.Q4'],
            axisLabel: {
              color: '#fff',
              fontSize: 15
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            }
          },
          // 使用 seriesData 变量的值
          series: seriesData.value
        };

        myChart.setOption(option);
      }
    };

    onMounted(() => {
      initChart();
    });

    // 监听 props.PieIndex 的变化
    watch(() => props.PieIndex, () => {
      initChart();
    });

    return {
      chartId,
      updateLegendData
    };
  }
});
</script>

<style scoped>
.LinechartBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.chart-container {
  padding-top: 20px;
  /* 距离顶部 20px */
  display: flex;
  justify-content: center;
  /* 水平居中 */
}

.chart {
  width: 97%;
  height: 370px;
}
</style>